<template>
	<view class="box">
		<view class="top" :style="{height:marginNavTop,top:0}">
			<view class="navbar" :style="{paddingTop:statusBarHeight,height:statusNavHeight}">
				<view class="navTop" :style="{height:statusNavHeight}">
					<view class="left" @click="goBack">
					</view>
					<view class="center">
						我的票
					</view>
					<view class="right">
					</view>
				</view>
			</view>
		</view>

		<view class="content" :style="{paddingTop:marginNavTop}">
			<scroll-view scroll-y class="scroll-view">
				<!-- 我的票区域 -->
				<view class="section">
					<view class="section-title">我的票</view>
					<view class="ticket-list">
						<view class="ticket-item" v-for="(item, index) in currentTickets" :key="index">
							<view class="ticket-content">
								<view class="left-content">
									<image class="poster" :src="item.image" mode="aspectFill"></image>
									<view class="show-title">{{item.title}}</view>
								</view>
								<view class="info">
									<view class="label">场地</view>
									<view class="venue">{{item.venue}}</view>
									<view class="label">时间</view>
									<view class="time">{{item.time}}</view>
								</view>
							</view>
							<view class="action-btn" @click="viewDetail(item)">
								查看详情
							</view>
						</view>
					</view>
				</view>

				<!-- 历史票区域 -->
				<view class="section">
					<view class="section-title">历史票</view>
					<view class="ticket-list">
						<view class="ticket-item" v-for="(item, index) in historyTickets" :key="index">
							<view class="ticket-content">
								<view class="left-content">
									<image class="poster" :src="item.image" mode="aspectFill"></image>
									<view class="show-title">{{item.title}}</view>
								</view>
								<view class="info">
									<view class="label">场地</view>
									<view class="venue">{{item.venue}}</view>
									<view class="label">时间</view>
									<view class="time">{{item.time}}</view>
								</view>
							</view>
							<view class="action-btn" @click="viewDetail(item)">
								查看详情
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				statusNavHeight: 0,
				marginNavTop: 0,
				currentTickets: [{
					image: '/static/img/test1.jpg',
					venue: '杭州市 | 一支麦小剧场-西湖江工联CC&615',
					title: '脱口秀专场｜精选计划',
					time: '2024.12.20 20:00'
				}],
				historyTickets: [{
						image: '/static/img/test2.jpg',
						venue: '杭州市 | 杭州剧院',
						title: '音乐剧《芝加哥》',
						time: '2024.12.01 14:30'
					},
					{
						image: '/static/img/test2.jpg',
						venue: '杭州市 | 杭州剧院',
						title: '音乐剧《芝加哥》',
						time: '2024.12.01 14:30'
					},
					{
						image: '/static/img/test2.jpg',
						venue: '杭州市 | 杭州剧院',
						title: '音乐剧《芝加哥》',
						time: '2024.12.01 14:30'
					}

				]
			}
		},
		created() {
			this.statusBarHeight = getApp().globalData.statusBarHeight + 'px'
			this.statusNavHeight = getApp().globalData.statusNavHeight + 'px'
			this.marginNavTop = (getApp().globalData.statusBarHeight + getApp().globalData.statusNavHeight + 6) + 'px'
		},
		onReachBottom() {
			console.log('到底还在出发');
		},
		onLoad(option) {
			console.log(option, '传递的参数');
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			viewDetail(item) {
				uni.navigateTo({
					url: '/pages/ticketDetail/ticketDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		min-height: 100vh;
		background-color: #F7F8FA;

		.top {
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			position: fixed;
			z-index: 5;
			background-color: #fff;

			.navbar {
				width: 100%;
				box-sizing: border-box;

				.navTop {
					width: 100%;
					display: flex;
					align-items: center;

					.left {
						width: 180rpx;
						height: 100%;
						display: flex;
						align-items: center;
						padding-left: 40rpx;

						.image {
							width: 64rpx;
							height: 64rpx;
						}
					}

					.center {
						flex: 1;
						text-align: center;
						font-size: 38rpx;
						font-weight: 500;
						color: #000;
					}

					.right {
						width: 180rpx;
					}
				}
			}
		}

		.content {
			height: 100vh;

			.scroll-view {
				height: 100%;
			}

			.section {
				margin-bottom: 30rpx;

				.section-title {
					padding: 20rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
				}

				.ticket-list {
					padding: 0 20rpx;

					.ticket-item {
						background-color: #fff;
						border-radius: 12rpx;
						margin-bottom: 20rpx;
						padding: 20rpx;

						.ticket-content {
							display: flex;
							margin-bottom: 20rpx;

							.left-content {
								width: 240rpx;
								margin-right: 20rpx;

								.poster {
									width: 240rpx;
									height: 320rpx;
									border-radius: 8rpx;
									margin-bottom: 12rpx;
								}

								.show-title {
									font-size: 28rpx;
									color: #333;
									line-height: 1.4;
									font-weight: 500;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
								}
							}

							.info {
								flex: 1;
								padding: 10rpx 0;

								.label {
									font-size: 24rpx;
									color: #999;
									margin-bottom: 8rpx;
								}

								.venue {
									font-size: 28rpx;
									color: #333;
									margin-bottom: 20rpx;
								}

								.time {
									font-size: 28rpx;
									color: #333;
								}
							}
						}

						.action-btn {
							width: 160rpx;
							height: 60rpx;
							border: 1rpx solid #FF4785;
							border-radius: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 26rpx;
							color: #FF4785;
							margin-left: auto;
						}
					}
				}
			}
		}
	}
</style>